<template>
	<div class="w750">
		<!-- 头部 -->
		<header>
			<div class="header-box">
				<div class="header-back" @click="goback">
					<span class="back-img"><img src="../../assets/images/back.png" alt="" /></span>
				</div>
				<div class="header-search"><p class="ser-txt">订单支付</p></div>
				<div class="header-mes"><a href="javascript:;" class="mes-img"></a></div>
			</div>
		</header>
		<!-- /头部 -->
		<div :class="themes.theme" style="margin-top:44px;">
			<div class="order-pay" :class="themes.theme">
				<div class="ord-pri">
					<span class="tit">订单金额</span>
					<span class="price" :style="{'color':themes.color}">
						&#65509;
						<em class="now" :style="{'color':themes.color}">{{ Money(payInfo.totalAmount)[0] }}</em>
						.{{ Money(payInfo.totalAmount)[1] }}
					</span>
				</div>

				<!-- 支付方式 -->
				<p class="way-tit">支付方式</p>
				<div class="pay-way">
					<div class="item" @click="choosePayType('ALP')" v-if="payInfo.payClient.ALP">
						<span class="item-img"><img src="../../assets/images/pay-zhi.png" alt="" /></span>
						<span class="item-con">支付宝</span>
						<span class="choose" :class="{ cur: selPayType == 'ALP' }"></span>
					</div>

					<div class="item" @click="choosePayType('WX_PAY')" v-if="payInfo.payClient.WX_PAY">
						<span class="item-img"><img src="../../assets/images/pay-wei.png" alt="" /></span>
						<span class="item-con">微信</span>
						<span class="choose" :class="{ cur: selPayType == 'WX_PAY' }"></span>
					</div>
					<!-- <div class="item" @click="choosePayType('SIMULATE')">
						<span class="item-img"><img src="../../assets/images/pay-mo.png" alt="" /></span>
						<span class="item-con">模拟支付</span>
						<span class="choose" :class="{ cur: selPayType == 'SIMULATE' }"></span>
					</div> -->
				</div>
				<!-- /支付方式 -->

				<div class="b-btn" :class="themes.theme"><span class="btn-r" :class="{pointerEvents:!selPayType}" @click="surePay">确认支付</span></div>
			</div>
		</div>

		<van-dialog
			v-model="show"
			title="请确认微信支付是否已完成"
			show-cancel-button
			confirm-button-text="已完成"
			cancel-button-text="未完成"
			@confirm="goOrderList()"
			@cancel="show = false"
		></van-dialog>

		<div class="pay" v-html="payData" v-if="payData" style="display:none;"></div>
	</div>
</template>

<script>
import {mapState} from 'vuex'
import { Swipe, SwipeItem, NavBar, Dialog } from 'vant';
import cash from 'utils/tool';
import { getUa } from 'utils/utils';
import { payto } from 'api/common/appPayCenter';
import platformPayto from 'service/payTo'; //调用支付
export default {
	components: {},
	data() {
		return {
			Money: cash, //价格转换
			// 支付信息
			payInfo: {
				payClient: {
					ALP: {mobile: 0},
					WX_PAY: {mobile: 0},
				},
				paySecret: "",
				paySource: "",
				payToken: "",
				subject: "",
				totalAmount: "",
				totalBalance: ""
			},
			payData: '', //支付成功返回的
			selPayType: '', // 选择的支付方式

			show: false, // 确认是否已完成支付

			payType: platformPayto.payType // 支付类型常量

			
		};
	},

	mounted() {

		let that = this;


		//如果有路由参数
		if (this.$route.query) {
			if (this.$route.query.isReturn) {//有isReturn参数说明是微信H5支付返回
				this.show = true;
			}

			//获取路由里的订单信息
			let orderInfo = this.$route.query;

			// 获取支付信息， 渲染收银台页面
			payto({
				subSettlementType: orderInfo.subSettlementType,
				subNumber: orderInfo.subNumber,
				paySource: "H5"
			}).then(res => {
				if (res.success) {
					this.payInfo = res.result;

					if(this.payInfo.payClient.ALP){
						this.selPayType = 'ALP';
					} else if(this.payInfo.payClient.WX_PAY){
						this.selPayType = 'WX_PAY';
					}

				} else {
					this.$toast(res.msg);
				}
			}).finally(() => {
				this.$toast.clear();
			});
		}
	},
	methods: {
		// 返回
		goback() {
			this.$dialog.confirm({
				message: '是否放弃付款？'
			}).then(() => {
				sessionStorage.setItem('status', '');
				this.$router.replace('/orderList');
			});
		},

		//去订单列表
		goOrderList() {
			sessionStorage.setItem('status', '');
			this.$router.replace('/orderList');
		},

		/**
		 * 选择支付方式
		 */
		choosePayType(payTypeValue){
			if (this.selPayType == payTypeValue) {
				this.selPayType = '';
			} else {
				this.selPayType = payTypeValue;
			}
			this.$forceUpdate();
		},

		//确认支付
		surePay() {

			let payTypeValue = this.selPayType;
			let subNumbers = this.payInfo.subNumber.split(",");

			//如果没有选择支付方式
			if (!this.selPayType) {
				this.$toast('请选择支付方式');
				return;
			}

			//如果是微信端打开阿里支付
			if (getUa().isWeixin && payTypeValue == platformPayto.payType.ALIPAY) {
				this.$router.replace({
					path: `/pay`,
					query: {
						payType: payTypeValue,
						subNumbers: subNumbers.join(","),
						subSettlementType: 'USER_ORDER'
					}
				});
				return;
			}

			this.$toast.loading({mask: true,message: '正在支付中...'});

			platformPayto.pay(payTypeValue, this.payInfo.paySecret, this.payInfo.payToken).then(res => {
				if (res.success) {
					this.$toast.clear();

					this.payData = res.data;
					this.$nextTick(() => {document.forms[0].submit()});
				} else {
					this.$toast({ duration: 1000, message: res.msg});
				}
			}).catch(e => {
				this.$toast({ duration: 1000, message: "网络异常, 请检查您的网络设置!" });
			});
		},
	},
	computed: {
		...mapState(['themes']),
	},
};
</script>

<style src="../../assets/css/style/my-style.css" scoped></style>
<style src="../../assets/css/pre-deposit.css" scoped></style>
<style scoped>
.pointerEvents {
	background: darkgray;
    color: #fff;
    border: 1px solid darkgray;
    pointer-events: none;
  }
</style>
